class Snake
{
    constructor(el)
    {
        // 一、保存map地图对象
        this.el = el   
        // 二、存蛇的宽度和高度          
        this.size = 20     
        // 三、存蛇的默认的位置left和top的格子、颜色、      
        this.snakeObj = [   
            { left:3 , top:2 , color:'red' , el:null } ,        // 蛇头
            { left:2 , top:2 , color:'blue' , el:null } ,       // 蛇身   
            { left:1 , top:2 , color:'blue' , el:null }         // 蛇身 
        ]
        this.direction = 'right'    // 蛇默认开始游戏就往右移动
    }

    remove()
    {
        // 父.removeChild(子)
        // 父指的是this.el ，子指的是{ left:3 , top:2 , color:'red' , el:null } 中的el,表示的是蛇节对象，因为创建的时候保存过蛇节对象 this.snakeObj[i].el = divObj
        
        // 1、循环遍历移除蛇
         for(let i = 0 ; i < this.snakeObj.length ; i++){
            //  一开始没有保存蛇节对象，所以需要判断蛇节是否存在，当保存了在移除，默认打开页面蛇节是null是假的
           if(this.snakeObj[i].el) this.el.removeChild(this.snakeObj[i].el)
        }
    }

    create()
    {
        // 从地图上清除蛇，然后再创建新的蛇
        this.remove()

        // 步骤：
        // 1、循环遍历创建蛇
        for(let i = 0 ; i < this.snakeObj.length ; i++){
            // 2、创建蛇标签对象
            let divObj = document.createElement('div')        // 创建用createElement
            // 3、设置蛇的宽度、高度、坐标、颜色
            divObj.style.width = this.size + 'px'
            divObj.style.height = this.size + 'px'
            divObj.style.position = 'absolute'
            divObj.style.backgroundColor = this.snakeObj[i].color
            divObj.style.left = this.snakeObj[i].left * this.size + 'px'
            divObj.style.top = this.snakeObj[i].top * this.size + 'px'

            // 单独保存一下蛇节对象
            this.snakeObj[i].el = divObj

            // 4、将蛇追加到页面中
            this.el.appendChild(divObj)
        }
    }

    move()
    {
        /* // 1、将构造函数中的蛇的left数据+1 实现蛇水平移动
        for(let i = 0 ; i < this.snakeObj.length ; i++){
            this.snakeObj[i].left += 1
        } 
        // 2、重新创建新的蛇
        this.create() */


        // ☆通过判断蛇头移动的方向，来更换left和top值
        // 蛇头      蛇身1      蛇身2
        // 蛇头往上走    top - 1
        // 蛇头往下走    top + 1
        // 蛇头往左走    left - 1
        // 蛇头往右走    left + 1

        // 蛇头移动一下： 蛇身2到蛇身1的位置   蛇身1到蛇头的位置  蛇头位置自己判断

        // 1、从后往前判断蛇身所在的位置【i>0是不含蛇头的，i>=0是含蛇头的，所以用i>0】
        for(let i = this.snakeObj.length - 1 ; i>0 ; i--){
            this.snakeObj[i].left = this.snakeObj[i-1].left
            this.snakeObj[i].top = this.snakeObj[i-1].top
        } 

        // 2、判断蛇头的位置
        switch (this.direction) {
            case 'top':
                this.snakeObj[0].top -= 1
                break
            case 'bottom':
                this.snakeObj[0].top += 1
                break
            case 'left':
                this.snakeObj[0].left -= 1
                break
            case 'right':
                this.snakeObj[0].left += 1
                break
        }

        // 3、重新创建新的蛇
        this.create()

    }
}